<template>
  <view class="y_home">
    <index
      v-show="Sindex2 == 0"
      :class="[{ 'st-is': Sindex == 0 }, 'st-ss']"
    ></index>
    <!-- like是2，inform是3，my是4 -->
    <like
      v-show="Sindex2 == 1"
      :class="[{ 'st-is': Sindex == 1 }, 'st-ss']"
    ></like>
    <inform
      v-if="Sindex2 == 2"
      :class="[{ 'st-is': Sindex == 2 }, 'st-ss']"
    ></inform>
    <my v-if="Sindex2 == 3" :class="[{ 'st-is': Sindex == 3 }, 'st-ss']"></my>
    <y_tabBarPro @yt="ytc"></y_tabBarPro>
  </view>
</template>

<script>
// 导入组件 index
import index from "./../index/index.vue";
// 导入 like,inform,my
import like from "./../like/like.vue";
import inform from "./../inform/inform.vue";
import my from "./../my/my.vue";
export default {
  data() {
    return {
      // 读取本地存储的数据
      Sindex: uni.getStorageSync("Sindex") || 0,
      Sindex2: uni.getStorageSync("Sindex2") || 0,
    };
  },
  methods: {
    ytc(e) {
      // 获取回调的值
      let { index } = e;
      this.Sindex = 5;
      //延迟1秒
      setTimeout(() => {
        this.Sindex2 = index;
      }, 200);

      setTimeout(() => {
        this.Sindex = index;
      }, 300);
      // console.log("ytc", e);
    },
  },
  components: {
    index,
    like,
    inform,
    my,
  },
};
</script>

<style lang="scss">
y_home {
  position: relative;
  height: 100vh;
}

.st-is {
  // 透明度
  opacity: 1 !important;
  transition: all 0.4s;
}

.st-ss {
  opacity: 0;
  transition: all 0.3s;
}
</style>
